<!-- 账单减免 -->
<template>
  <div style="padding: 15px 30px">
    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input :readonly="true" v-model="billObj.projectName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人">
            <el-input :readonly="true" v-model="billObj.applyUserName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同名称">
            <el-input :readonly="true" v-model="billObj.contractName">
              <template slot="append">
                <el-button type="text" @click="goToInfo(billObj.contractKey,billObj.contractType)">查看</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="对方名称">
            <el-tag type="info" v-for="item in billObj.partnerList" :key="item.primaryKey" class="margin-right-15">{{ item.partnerName }}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="display: flex; justify-content: space-between" class="padding-top-15">
      <div class="font-size-16 font-weight-700">账单信息</div>
      <div></div>
    </div>
    <div v-if="billObj.rentMode == 'get_high'" class="font-weight-600 font-size-17 padding-bottom-10">抽成部分</div>
    <el-table v-if="billObj.rentMode == 'get_high'" :border="true" :data="amountList">
      <el-table-column align="center" label="固定租金金额" prop="fixedAmount" />
      <el-table-column align="center" label="分成租金金额" prop="shareAmount" />
      <el-table-column align="center" label="扣点租金金额" prop="pointAmount" />
    </el-table>
    <el-table :data="billObj.billItemList" class="table-margin" style="width: 100%" border>
      <el-table-column label="序号" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="资产" prop="shopNumber"></el-table-column> -->
      <el-table-column align="center" label="费项名称" prop="kjine">
        <template slot-scope="scope">
          <span>{{ billTypeList[scope.row.bizType] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账单起付时间" prop="kjine">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleStartTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账单截止时间" prop="kjine">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleEndTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="付款截止时间" prop="kjine">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentDeadline | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账单金额" prop="amountReceivable" />
      <el-table-column align="center" label="未付金额" prop="weifujine" />
      <el-table-column align="center" label="已付金额" prop="amountReceived" />
    </el-table>
    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="出账金额">
            <el-input :readonly="true" v-model="billObj.billItem.weifujine"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="减免">
            <el-input :readonly="true" v-model="billObj.amountDiscount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="说明">
            <el-input :readonly="true" v-model="billObj.billDesc"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <approve-info></approve-info>

  </div>
</template>
<script>
  import { apiApproveBillInfo } from '../../api/contract';
  import { accSubtr } from '@/common/js/utils.js';
  import approveInfo from './approveInfo.vue';

  export default {
    data() {
      return {
        billObj: {billItem:{weifujine:0}},
        amountList: [],
        billTypeList: {
          rent: '租金',
          manage: '管理费',
          water: '水费',
          electricity: '电费',
          performanceDeposit: '履约保证金',
        }
      };
    },

    mounted() {
      this.getBillInfo();
    },
    methods: {
      //账单详情
      async getBillInfo() {
        let res = await apiApproveBillInfo({
          processWorkId: this.$route.query.processWorkId
        });
        let qianfeiJine = accSubtr(Number(res.billItem.amountReceivable), Number(res.billItem.amountReceived));
        res.billItem.weifujine = qianfeiJine < 0 ? 0 : qianfeiJine;
        res.billItemList = [res.billItem]
        res.oldTableData = JSON.parse(JSON.stringify(res.billItemList));
        res.pointAmount = accSubtr(res.shareAmount, res.fixedAmount);
        res.pointAmount = res.pointAmount <= 0 ? "" : res.pointAmount;
        this.billObj = res;
        this.amountList = [{ fixedAmount: res.fixedAmount, shareAmount: res.shareAmount, pointAmount: res.pointAmount }];
      },
      goToInfo(contractKey,contractType) {
        let url = '/businessAssets/ContractManage/drafting?isInfo=true&isTodo=true&contractKey=' + contractKey + '&contractType=' + contractType
        window.open(url);
      },
    },

    components:{approveInfo}
  };
</script>
<style scoped lang="scss">
  .flex-box {
    height: 50px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;

    justify-content: space-between;
    .large-title {
      font-size: 18px;
    }
  }
  .table-margin {
    margin: 15px 0;
  }
</style>
